<template>
  <div class="type-tree">
    <el-button
      class="addtop-btn"
      type="primary"
      v-if="judgePermission(pageNo, 'addTop')"
      @click="addTopTree()"
    ></el-button>
    <el-button
      type="primary"
      class="refresh-btn"
      @click="$emit('updataTable1', equipmentTypeCode)"
    ></el-button>
    <el-row class="title-content">
      <el-col v-for="(a, indexa) in titleArr" :key="indexa" :span="a.span">
        {{
        a.name
        }}
      </el-col>
    </el-row>
    <el-tree
      ref="tree"
      class="tree-content"
      :props="treerule"
      :data="treeData"
      highlight-current
      check-strictly
      accordion
      :default-expand-all="true"
      :expand-on-click-node="false"
      :node-key="'equipmentTypeCode'"
      @node-click="handleTreeEdit"
    >
      <span slot-scope="{ node, data }" class="custom-tree-node">
        <span>{{ node.label }}</span>
        <span class="custom-tree-node-btns">
          <el-button
            type="success"
            size="mini"
            icon="el-icon-plus"
            circle
            v-if="judgePermission(pageNo, 'addType')"
            @click.stop="() => addTree(data)"
          />
          <el-button
            type="primary"
            size="mini"
            icon="el-icon-edit"
            circle
            v-if="judgePermission(pageNo, 'editType')"
            @click.stop="() => editTree(data)"
          />
          <el-button
            v-if="
              data['notdel'] === 'false' &&
              judgePermission(pageNo, 'deleteType')
            "
            type="danger"
            size="mini"
            icon="el-icon-delete"
            circle
            @click.stop="() => removeTree(data)"
          />
        </span>
      </span>
    </el-tree>
    <TreeAddEditDialog
      ref="TreeAddEditDialog"
      :now-chance-stau="nowChanceStau"
      :title-text="titleText"
      :parent-code="parentCode"
      :edit-object="treeEditObject"
      :show.sync="showTreeAddEditDialog"
      @closeDialog="closeDialog"
      @cancelDialog="cancelDialog"
    />
  </div>
</template>

<script>
import equipTypeApi from "@/api/equip-manage/equip-type/index";
import TreeAddEditDialog from "./tree-add-edit-dialog.vue";
import { mymixin } from "@/utils/mixin";
import { mapGetters } from "vuex";

export default {
  components: { TreeAddEditDialog },
  mixins: [mymixin],
  props: {
    pageNo: {
      type: Number,
      default: null,
    },
    titleArr: {
      type: Array,
      default: () => {
        return [
          { name: "设备类型", span: 18 },
          { name: "操作", span: 6 },
        ];
      },
    },
  },
  data() {
    return {
      showTreeAddEditDialog: false,
      treeEditObject: {},
      treerule: {
        children: "childList",
        label: "equipmentTypeName",
      },
      treeData: [],
      undeleteList: [],
      parentCode: "",
      equipmentTypeCode: "",
    };
  },
  computed: {
    ...mapGetters({
      judgePermission: "permission/judgePermission",
    }),
  },
  mounted() {
    this.getTreeDataList();
  },
  methods: {
    // 查询不可删除的类型
    queryUndelete() {
      this.loading = true;
      // 查询表格
      equipTypeApi.queryUndelete({}).then((res) => {
        this.loading = false;
        // 赋值数组
        if (res.code === 1) {
          let data = res.data;
          this.undeleteList = [];
          if (data) {
            for (var i in data) {
              this.undeleteList.push({
                equipmentTypeName: i,
                equipmentTypeCode: data[i],
              });
            }
          }
          if (this.undeleteList.length > 0) {
            this.handelTreeList(this.treeData);
            this.treeData = [...this.treeData];
          }
        }
      });
    },
    handelTreeList(list) {
      list.forEach((item) => {
        var index = this.undeleteList.findIndex(
          (a) => a.equipmentTypeCode === item.equipmentTypeCode
        );
        if (index !== -1) {
          this.$set(item, "notdel", "true");
        } else {
          this.$set(item, "notdel", "false");
        }
        if (item.childList) {
          if (item.childList.length > 0) {
            this.$set(item, "notdel", "true");
          }
          this.handelTreeList(item.childList);
        }
      });
    },
    // 查询树状图数据
    getTreeDataList() {
      this.loading = true;
      this.treeData = [];
      // 查询表格
      equipTypeApi.queryTree({}).then((res) => {
        this.loading = false;
        // 赋值数组
        if (res.code === 1) {
          let data = res.data;
          this.treeData = data;

          this.$emit("updataTable", data[0].equipmentTypeCode);
          this.equipmentTypeCode = data[0].equipmentTypeCode;
          this.queryUndelete();
        }
      });
    },
    addTopTree() {
      this.nowChanceStau = "add";
      this.titleText = "添加";
      this.parentCode = 0;
      this.showTreeAddEditDialog = true;
    },
    addTree(data) {
      this.nowChanceStau = "add";
      this.titleText = "添加";
      this.parentCode = data.equipmentTypeCode;
      this.treeEditObject = data;
      this.showTreeAddEditDialog = true;
    },
    editTree(data) {
      this.nowChanceStau = "edit";
      this.titleText = "修改";
      this.parentCode = data.equipmentTypeCode;
      this.treeEditObject = data;
      this.showTreeAddEditDialog = true;
    },
    removeTree(data) {
      this.$confirm("此操作将永久删除该类型, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "myClass",
      })
        .then(() => {
          var form = new FormData();
          form.append("equipmentTypeList", data.equipmentTypeCode);
          equipTypeApi.delList(form).then((res) => {
            if (res.code === 1) {
              this.$message.success(res.msg);
              this.getTreeDataList();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // handleSelectionChange (list) {
    //   this.checkedIdList = [];
    //   this.checkedIdList = list.map((item) => item.equModelCode);
    //   if (this.checkedIdList.length > 0) this.delActive = true;
    //   else this.resetActionBar();
    // },
    handleTreeEdit(node) {
      // TODO 点击行元素后 edit
      this.treeEditObject = JSON.parse(JSON.stringify(node));
      this.equipmentTypeCode = node.equipmentTypeCode;
      this.$emit("queryDataBytype", this.equipmentTypeCode, node);
    },
    closeDialog() {
      if (this.showTreeAddEditDialog === true) {
        this.getTreeDataList();
      }
      this.cancelDialog();
    },
    cancelDialog() {
      this.showTreeAddEditDialog = false;
      this.nowChanceStau = "";
      this.titleText = "";
      this.editObject = {};
      this.addActive = true;
      this.delActive = false;
      this.editActive = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.type-tree {
  height: 100%;
  width: 100%;
}
.title-content {
  width: 100%;
  height: 30px;
  display: flex;
  align-items: center;
  padding: 0 5px;
  color: #fff;
  background-color: #024e66 !important;
  border: #2f8aa2 1px solid;
  > div {
    text-align: center;
    border-right: #2f8aa2 1px solid;
    &:last-of-type {
      border-right: 0;
    }
  }
}
.addtop-btn {
  margin-bottom: 5px;
  width: 96px;
  height: 29px;
  background: url("~@/assets/action-bar-icon/btn_add_top.png") center center
    no-repeat;
  background-size: 100% cover;
}
.refresh-btn {
  margin-bottom: 5px;
  width: 72px;
  height: 29px;
  background: url("~@/assets/action-bar-icon/btn_refresh.png") center center
    no-repeat;
  background-size: 100% cover;
}
.tree-content {
  height: calc(100% - 80px);
  overflow-y: auto;
  overflow-x: hidden;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 8px;
  cursor: pointer;
  &:hover {
    background-color: #0cb28c !important;
    .custom-tree-node-btns {
      display: block !important;
    }
  }
}
.custom-tree-node-btns {
  height: 100%;
  display: none;
  > button {
    padding: 4px;
  }
}
</style>
